<template>
  <div>
    <div class="swiper">
      <!-- 大的轮播图 -->
      <van-swipe class="my-swipe"
                 width="100%"
                 height="200"
                 :autoplay="3000"
                 indicator-color="red">
        <van-swipe-item v-for="item in bannerlist"
                        :key="item.id">
          <img :src="item.picUrl"
               alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- 滚动商品的swiper -->
      <van-swipe style="height:40px;"
                 class="move_slide"
                 width="100%"
                 :autoplay="3000"
                 :show-indicators="false"
                 :vertical="true">
        <van-swipe-item v-for="item in moveList"
                        :key="item.id">
          <div class="move_one">
            <img src="../assets/logo.png"
                 alt="">
            <span>名称</span>
            <span>购买了</span>
            <span>{{item.goodsName}}</span>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import { getBanner } from '../api/home'
import { DynamicApi } from '../api/home'
export default {
  name: 'Ljfvue2011Bannercom',

  data () {
    return {
      bannerlist: [],
      moveList: []
    };
  },
  created () {
    getBanner().then(res => {
      console.log(res)
      this.bannerlist = res.data.data.slice(3, 6);
    })
    // 推荐轮播图数据
    DynamicApi(0).then(res => {
      console.log(res);
      this.moveList = res.data.data;
    })
  },
  mounted () {

  },

  methods: {

  },
};
</script>

<style lang="less" scoped>
.swiper {
  width: 100%;
  background: pink;
  position: relative;
}
.my-swipe {
  img {
    width: 100%;
    height: 100%;
  }
}
.move_slide {
  position: absolute;
  width: 60%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  bottom: 40px;
  left: 30px;
  border-radius: 50px;
  overflow: hidden;
  .move_one {
    display: flex;
    height: 60px;
    justify-content: space-around;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>